<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Docker Box</title>
</head>
<body class="bg">
    <table class="mytable" border="1">
        <caption class="mytitle">镜像空间使用</caption>
        <tr>
            <th bgcolor="aqua" >Repository Name</th>
            <th bgcolor="aqua">Size</th>
            <th bgcolor="aqua">Shared Size</th>
            <th bgcolor="aqua">Unique Size</th>
        </tr>
        {% for image_item in data_items.Images %}
        <tr>
            <td>{{image_item.RepoTags}}</td>
            <td>{{image_item.Size}}</td>
            <td>{{image_item.SharedSize}}</td>
            <td>{{image_item.UniqueSize}}</td>
        </tr>
        {% endfor %}
    </table>

    <table class="mytable" border="1">
        <caption class="mytitle">容器空间使用</caption>
        <tr>
            <th bgcolor="aqua">容器ID</th>
            <th bgcolor="aqua">容器名称</th>
            <th bgcolor="aqua">容器IP地址</th>
            <th bgcolor="aqua">容器状态</th>
            <th bgcolor="aqua">容器空间大小</th>
        </tr>
        {% for container_item in data_items.Containers %}
        <tr>
            <td>{{container_item.Id}}</td>
            <td>{{container_item.Names}}</td>
            <td>{{container_item.IPAddress}}</td>
            <td>{{container_item.State}}</td>
            <td>{{container_item.SizeRw}}</td>
        </tr>
        {% endfor %}
    </table>

</body>
<style type="text/css">
    .mytable{
        width: auto;
        height: auto;
        margin: 0 auto;
        margin-top: 30px;
        background-color: aliceblue;
        font-size: 22px;
    }
    .mytitle{
        font-size: 50px;
        font-weight: bolder;
    }
    .bg{
        background-image: url("/static/df_bg.jpg");
        background-size: 100% 100%;
        background-attachment: fixed;
        /*background-repeat: repeat;*/
    }
</style>
</html>